<template>
  <div class="search-page">
    <div class="search-main">
      <!--  搜索主要板块数据-->
      <div class="search-box">
        <div class="box-input">
          <el-input
            v-model="searchData"
            placeholder="请输入内容...."
            class="input-box"
            @keyup.native.enter="search(searchData)"
          ></el-input>
        </div>
        <div class="box-btn" @click="search(searchData)">搜索</div>
      </div>
      <div class="search-main-container">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label">全部帖子</span>
            <div class="data-box-search">
              <div class="data" v-show="allPostList.length">
                <postDemo
                  v-for="(item, index) in allPostList"
                  :key="index"
                  :postData="item"
                ></postDemo>
                <div class="search-loading-more" @click="loadData()">
                  {{ loadNoMoreData ? `暂无更多数据` : "点击加载..." }}
                </div>
              </div>
              <div class="data" v-show="!allPostList.length">
                <noneDataPage></noneDataPage>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label">用户</span>
            <div class="data-box-search">
              <div class="data" v-show="allUserList.length">
                <personDemo
                  v-for="(item, index) in allUserList"
                  :key="index"
                  :personData="item"
                ></personDemo>
                <div class="search-loading-more" @click="loadUserData()">
                  {{ loadNoMoreUserData ? `暂无更多数据` : "点击加载..." }}
                </div>
              </div>
              <div class="data" v-show="!allUserList.length">
                <noneDataPage></noneDataPage>
              </div>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane
            :label="navItem.name"
            v-for="navItem in navData"
            :key="navItem.id + navItem.name"
          >
            <div class="data-box-search">
              <div class="data">
                <postDemo
                  v-for="(itemMod, index) in navItem.moduleData"
                  :key="index"
                  :postData="itemMod"
                  v-show="navItem.moduleData.length"
                ></postDemo>
              </div>
              <div class="data" v-show="!navItem.moduleData.length">
                <noneDataPage></noneDataPage>
              </div>
            </div>
          </el-tab-pane> -->
          <!-- <el-tab-pane>
            <span slot="label">用户</span>
            <div class="data-box-search">
              <div class="data"></div>
            </div>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
    <!-- 搜索记录 -->
    <!-- <div class="search-bar">
      <div class="search-bar-title">
        <i class="el-icon-edit"></i><span>近期搜索记录：</span>
      </div>
      <div class="search-bar-container">
        <div
          class="search-item"
          v-for="(item, index) in searchArray"
          :key="item + index"
        >
          <div class="search-item-data" @click="search(item.data)">
            {{ item.data }}
          </div>
          <div class="search-item-icon">
            <i class="el-icon-close" @click="removeSearchItem(item)"></i>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import personDemo from "@/components/szptPage/personDemo/index.vue";
import {
  searchDataByKeyword,
  searchUserByKeyword,
} from "@/api/szpt/searchPage";
import postDemo from "@/components/szptPage/postDemo/index.vue";
import noneDataPage from "@/components/szptPage/noneDataPage/index.vue";
export default {
  data() {
    return {
      searchData: "",
      //选项卡选项
      navData: [],
      // 搜索数据数组
      searchArray: [],
      // 所有帖子数据
      allPostList: [],
      // 所有用户数据
      allUserList: [],
      // 加载更多标记
      loadNoMoreData: false,
      // 加载用户标记
      loadNoMoreUserData: false,
      // 搜索标记用于区分搜索参数是否相同
      searchFlag: 0,
      // 搜索表单
      searchForm: {
        pageNum: 1,
        pageSize: 10,
      },
      searchUserForm: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  components: {
    personDemo,
    postDemo,
    noneDataPage,
  },
  watch: {
    // "$route.query.searchData": {
    //   handler(newValue) {
    //     // 处理查询参数变化
    //     this.searchData = newValue;
    //     console.log("eee", this.searchData);
    //     this.search(this.serachData);
    //   },
    //   immediate: true, // 立即执行一次，以便在组件创建时检查初始值
    // },
  },
  methods: {
    resetUserForm() {
      this.searchUserForm.pageNum = 1;
      this.searchUserForm.pageSize = 10;
    },
    resetPostForm() {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 10;
    },
    loadData() {
      this.$modal.loading("玩命加载中....");
      this.searchForm.pageNum = this.searchForm.pageNum + 1;
      searchDataByKeyword(
        this.searchForm.pageNum,
        this.searchForm.pageSize,
        this.searchData
      )
        .then((resp) => {
          if (resp.code === 200) {
            if (resp.data.pageInfo && resp.data.pageInfo.total > 0) {
              this.allPostList = this.allPostList.concat(
                resp.data.pageInfo.list
              );
            }
            if (resp.data.list && resp.data.list.length === 0) {
              this.loadNoMoreData = true;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$modal.closeLoading();
    },
    loadUserData() {
      this.$modal.loading("玩命加载中...");
      this.searchUserForm.pageNum = this.searchUserForm.pageNum + 1;
      searchUserByKeyword(
        this.searchUserForm.pageNum,
        this.searchUserForm.pageSize,
        this.searchData
      )
        .then((resp) => {
          if (resp.code === 200) {
            this.allUserList = this.allUserList.concat(resp.data.list);
            if (resp.data.list < this.searchUserForm.pageSize) {
              this.loadNoMoreUserData = true;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$modal.closeLoading();
    },
    // 将获得的全部搜索数据进行分类
    fmtSearchData(dataArray) {
      const moduleDataFlag = this.judgeSearchKeyword();
      if (moduleDataFlag) {
        this.navData.forEach((item) => {
          item.moduleData = [];
        });
      }
      if (dataArray instanceof Array && dataArray.length > 0) {
        this.navData.forEach((item) => {
          dataArray.forEach((dataItem) => {
            if (item.id === dataItem.tagDTOList[0].data.id) {
              console.log("2222", dataItem);
              item.moduleData.push(dataItem);
            }
          });
        });
      }
    },
    // 判断当前搜索关键词与上一个关键词是否相同
    judgeSearchKeyword() {
      if (this.searchArray.length > 1) {
        if (
          this.searchArray[this.searchArray.length - 1].id ===
          this.searchArray[this.searchArray.length - 2].id
        ) {
          return true;
        }
      }
      return false;
    },
    // 用户关键词搜索
    searchUserData(keyword) {
      this.resetUserForm();
      this.$modal.loading("玩命加载中....");
      searchUserByKeyword(
        this.searchUserForm.pageNum,
        this.searchUserForm.pageSize,
        keyword
      )
        .then((resp) => {
          if (resp.code === 200) {
            this.allUserList = resp.data.list;
            this.$modal.closeLoading();
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$modal.closeLoading();
    },
    // 搜索数据
    search(dataSearch) {
      this.resetPostForm();
      this.searchData = dataSearch;
      if (dataSearch) {
        this.$modal.loading("玩命加载中....");
        // 将搜索数据存入记录数组
        this.searchArray.push({ data: dataSearch, id: this.searchFlag + 1 });
        this.searchUserData(dataSearch);
        searchDataByKeyword(
          this.searchForm.pageNum,
          this.searchForm.pageSize,
          dataSearch
        )
          .then((resp) => {
            this.$modal.loading("玩命加载中...");
            console.log("数据", resp.data);
            if (resp.code === 200 && resp.data.pageInfo) {
              this.allPostList = resp.data.pageInfo.list;
            } else if (resp.data.list) {
              this.allPostList = resp.data.list;
            }
            this.fmtSearchData(this.allPostList);
            this.$modal.closeLoading();
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message.warning("搜索数据不能为空!");
        this.$modal.closeLoading();
      }
    },
    removeSearchItem(removeData) {
      this.searchArray = this.searchArray.filter((item) => item !== removeData);
    },
  },
  mounted() {
    this.searchData = this.$route.query.searchData;
    // 先进行分类在进行数据处理
    this.getDicts("szpt_nav_status").then((response) => {
      const navData = response.data;
      navData.forEach((navItem) => {
        navItem.id = navItem.dictCode;
        navItem.name = navItem.remark;
        navItem.path = navItem.dictValue;
        // 这里存储分类数据
        navItem.moduleData = [];
      });
      this.navData = navData;
      this.search(this.searchData);
    });
  },
};
</script>

<style lang="scss">
.search-page {
  width: 100%;
  height: auto;
  display: flex;
  background-color: #f7f8fc;
  .search-main {
    width: 68%;
    .search-box {
      width: 100%;
      height: 50px;
      display: flex;
      background-color: #ffe14c;
      .box-input {
        width: 82%;
        height: 100%;
        padding: 8px 10px;
        background-color: rgb(255, 255, 255);
        .input-box {
          height: 60px !important;
        }
      }
      .box-btn {
        width: 18%;
        text-align: center;
        height: 100%;
        line-height: 50px;
        color: #5e481c;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .search-main-container {
      width: 100%;
      margin-top: 20px;
      height: auto;
      .data-box-search {
        width: 100%;
        min-height: 500px;
        padding-top: 20px;
        background-color: #ffffff;
        .search-loading-more {
          width: 100%;
          height: 50px;
          text-align: center;
          color: rgb(0, 195, 255);
          cursor: pointer;
          line-height: 50px;
        }
        .search-loading-more:hover {
          color: #409eff;
        }
        .data {
          width: 100%;
          background-color: rgb(255, 255, 255);
        }
      }
      .el-tabs--border-card > .el-tabs__content {
        padding: 0 !important;
      }
      .el-tabs--border-card {
        box-shadow: none !important;
        border: none !important;
      }
      .el-tabs__nav-scroll {
        background-color: rgb(255, 255, 255) !important;
      }
      .el-tabs__item {
        //border: none !important;
        border-left: none !important;
        border-right: none !important;
      }
      .el-tabs__item.is-active {
        font-weight: bold;
        border-bottom: 3px solid #409eff;
      }
    }
  }
  .search-bar {
    width: 27%;
    margin-left: 35px;
    padding: 10px;
    height: fit-content;
    padding-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    .search-bar-title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: left;
      font-weight: bold;
      color: #5e481c;
      border-bottom: 1px solid #ececec;
    }
    .search-bar-container {
      width: 100%;
      height: auto;
      color: #999;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 20px;
      .search-item {
        padding: 5px 5px 5px 15px;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 10px;
        display: flex;
        justify-content: flex-start;
        background-color: #f7f8fc;
        cursor: pointer;
        margin-bottom: 10px;

        .search-item-data {
          width: auto;
          max-width: 300px;
          min-width: 30px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .search-item-icon {
          width: 20px;
          margin-left: 5px;
        }
        .search-item-icon:hover {
          background-color: rgb(213, 213, 213);
          border-radius: 8px;
          overflow: hidden;
        }
      }
      .search-item:hover {
        color: #409eff;
        padding: 5px 5px 5px 15px;
      }
    }
  }
}
</style>
